<template>
    <div class="tab-content">
        <el-form ref="sharedCapacityRef" :model="sharedCapacity" :rules="sharedCapacityRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="快递订单" prop="expressOrder">
                        <el-input-number v-model="sharedCapacity.expressOrder" :min="0" placeholder="请输入快递订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商超订单" prop="retailOrder">
                        <el-input-number v-model="sharedCapacity.retailOrder" :min="0" placeholder="请输入商超订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="医药订单" prop="medicalOrder">
                        <el-input-number v-model="sharedCapacity.medicalOrder" :min="0" placeholder="请输入医药订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="生鲜订单" prop="freshOrder">
                        <el-input-number v-model="sharedCapacity.freshOrder" :min="0" placeholder="请输入生鲜订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="冷链订单" prop="coldChainOrder">
                        <el-input-number v-model="sharedCapacity.coldChainOrder" :min="0" placeholder="请输入冷链订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="村镇订单" prop="ruralOrder">
                        <el-input-number v-model="sharedCapacity.ruralOrder" :min="0" placeholder="请输入村镇订单数量"
                            style="width: 90%" />
                        <span style="margin-left: 8px; color: #909399;">单</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveSharedCapacityData">保存共享运力配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { ElMessage } from 'element-plus'
    import { updateDataClassify } from '@/api/port'


    
    const sharedCapacityRef = ref()
    const sharedCapacity = ref({
        expressOrder: 0,
        retailOrder: 0,
        medicalOrder: 0,
        freshOrder: 0,
        coldChainOrder: 0,
        ruralOrder: 0
    })
    const sharedCapacityRules = {
        expressOrder: [{ required: true, message: '快递订单不能为空', trigger: 'blur' }],
        retailOrder: [{ required: true, message: '商超订单不能为空', trigger: 'blur' }],
        medicalOrder: [{ required: true, message: '医药订单不能为空', trigger: 'blur' }],
        freshOrder: [{ required: true, message: '生鲜订单不能为空', trigger: 'blur' }],
        coldChainOrder: [{ required: true, message: '冷链订单不能为空', trigger: 'blur' }],
        ruralOrder: [{ required: true, message: '村镇订单不能为空', trigger: 'blur' }]
    }

    // 保存函数
    const saveSharedCapacityData = async () => {
        if (!sharedCapacityRef.value) return
        
        try {
            await sharedCapacityRef.value.validate()
            
            await updateDataClassify({
                id: 1,
                key: 'module7',
                value: sharedCapacity.value
            })
            console.log('保存共享运力配置:', sharedCapacity.value)

            ElMessage.success('共享运力配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }

    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if (module) {
            sharedCapacity.value = {
                expressOrder: module.expressOrder || 0,
                retailOrder: module.retailOrder || 0,
                medicalOrder: module.medicalOrder || 0,
                freshOrder: module.freshOrder || 0,
                coldChainOrder: module.coldChainOrder || 0,
                ruralOrder: module.ruralOrder || 0
            }
        }
    }

    defineExpose({
        init
    })

</script>
<style scoped>

</style>